<template>
  <div class="spu">
    <Category></Category>
    <el-card>
      <el-button type="primary" size="small" icon="Plus">添加SPU</el-button>
      <el-table border style="margin: 10px 0" :data="records">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column
          label="SPU描述"
          prop="description"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="SPU操作"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 6, 9]"
        :small="false"
        :pager-count="9"
        :background="background"
        layout=" prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @size-change="SpuChangeSize"
        @current-change="getHasSpu"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue'
import { Records, HasSpuResponseData } from '@/api/product/spu/type'
import { reqHasSpu } from '@/api/product/spu'
import { useCategoryStore } from '@/store/modules/category'
const categoryStore = useCategoryStore()
const records = ref<Records>([])
const background = ref(true)
//存储已有SPU总个数
const total = ref<number>(0)
// 当前页数
const currentPage = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(3)
const getHasSpu = async () => {
  let result: HasSpuResponseData = await reqHasSpu(
    currentPage.value,
    pageSize.value,
    categoryStore.c3Id,
  )
  if (result.code == 200) {
    records.value = result.data.records
  }
}
watch(
  () => categoryStore.c3Id,
  () => {
    if (!categoryStore.c3Id) return
    getHasSpu()
  },
)
const SpuChangeSize = () => {
  getHasSpu()
}
</script>
